<template>
	<div class="container">
		 <!-- 面包屑导航 -->
		 <div class="breadcrumb">
		 	<el-breadcrumb separator="">
		 	  <el-breadcrumb-item><div class="div1">出库管理</div></el-breadcrumb-item>
		 			<el-breadcrumb-item v-if="juadg!='page'" :to="{ path: '/notInStock' }"><div class="div3">未备货订单</div></el-breadcrumb-item>
		 	  <el-breadcrumb-item><div class="div2">订单详情</div></el-breadcrumb-item>
		 	</el-breadcrumb>
		 </div>
		 <!-- 面包屑导航 -->
			<div class="address">
				  <p class="header">收货人信息</p>
						<ul>
							 <li>
									 <p>收货人姓名：张中原</p>
										<p>联系电话：1882516328</p>
										<p>收货地址：广州白云区江夏</p>	
								</li>
								<li>
									<p>详细地址：广州白云区江夏</p>
								</li>
								<li>
									<p>备注：无</p>
								</li>
						</ul>
			</div>
			<div class="orderBox">
				 <p class="header">订单商品</p>
						<el-table
								:data="tableData"
								style="width: 100%">
								<el-table-column
										prop="date"
										label="商品名称"
										width="500">
								</el-table-column>
								<el-table-column
										prop="name"
										label="商品数量"
										width="180">
								</el-table-column>
								<el-table-column
										prop="address"
										label="商品单价">
								</el-table-column>
								<el-table-column
										prop="address"
										label="商品规格">
								</el-table-column>
								<el-table-column
										prop="address"
										label="商品小计">
								</el-table-column>
						</el-table>
			</div>
			<div class="total">
				 <p>总计：共 3 件</p>
					<p>运费：0</p>
					<p>总价：1422</p>
			</div>
			<div class="manipulate">
				 <el-button type='primary'>发货</el-button>
					<el-button type='warning'>驳回订单</el-button>
			</div>
			<div class="fix" v-if="juadg!='page'">
						<el-tabs v-model="activeName" @tab-click="handleClick">
								<el-tab-pane label="订单修改记录" name="first">
												<el-table
														:data="tableData1"
														:span-method="objectSpanMethod"
														border
														style="width: 100%; margin-top: 20px">
														<el-table-column
																prop="id"
																label="修改记录"
																width="180">
														</el-table-column>
														<el-table-column
																prop="name"
																label="记录人员">
														</el-table-column>
														<el-table-column
																prop="amount1"
																label="进度时间">
														</el-table-column>
														<el-table-column
																prop="amount2"
																label="审核人员">
														</el-table-column>
														<el-table-column
																prop="amount3"
																label="审核时间">
														</el-table-column>
														<el-table-column
																prop="amount3"
																label="审核订单">
														</el-table-column>
												</el-table>
								</el-tab-pane>
								<el-tab-pane label="物流记录" name="second">
									  <el-table
									  		:data="tableData"
									  		style="width: 100%">
									  		<el-table-column
									  				prop="date"
									  				label="物流记录"
									  				width="600">
									  		</el-table-column>
									  		<el-table-column
									  				prop="name"
									  				label="记录人员"
									  				width="180">
									  		</el-table-column>
									  		<el-table-column
									  				prop="address"
									  				label="进度时间">
									  		</el-table-column>
									  </el-table>
								</el-tab-pane>
						</el-tabs>
			</div>
			<div class="total" v-if="juadg == 'page'">
	    	<el-button type="primary">确定改单</el-button>
						<el-button type="primary">提交经理</el-button>
			</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				 activeName: 'first',
					tableData: [{
							date: '2016-05-02',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1518 弄'
					}, {
							date: '2016-05-04',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1517 弄'
					}, {
							date: '2016-05-01',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1519 弄'
					}, {
							date: '2016-05-03',
							name: '王小虎',
							address: '上海市普陀区金沙江路 1516 弄'
					}],
					tableData1: [{
							id: '12987122',
							name: '王小虎',
							amount1: '234',
							amount2: '3.2',
							amount3: 10
					}, {
							id: '12987123',
							name: '王小虎',
							amount1: '165',
							amount2: '4.43',
							amount3: 12
					}, {
							id: '12987124',
							name: '王小虎',
							amount1: '324',
							amount2: '1.9',
							amount3: 9
					}, {
							id: '12987125',
							name: '王小虎',
							amount1: '621',
							amount2: '2.2',
							amount3: 17
					}, {
							id: '12987126',
							name: '王小虎',
							amount1: '539',
							amount2: '4.1',
							amount3: 15
					}],
					juadg:'',//判断页面
			}
		},
		mounted() {
			this.juadg = this.$route.query.juadg;
			 console.log(this.$route.query.juadg)
		},
		methods:{
				handleClick(tab, event) {
						console.log(tab, event);
				},
			objectSpanMethod({rowIndex, columnIndex }) {
					if (columnIndex === 0) {
							if (rowIndex % 2 === 0) {
									return {
											rowspan: 2,
											colspan: 1
									};
							} else {
									return {
											rowspan: 0,
											colspan: 0
									};
							}
					}
			},
		}
	}
</script>

<style scoped lang="scss">
	.div1{
		margin-left:-16px;
		background: url(../../../assets/breadcrumb2.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#2D7EDF;
	}
	
	.div2{
		margin-left:-16px;
		background: url(../../../assets/breadcrumb1.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#fff;
	}
	.div3{
		margin-left:-8px;
		background: url(../../../assets/breadcrumb3.png);
		width:120px;
		height:30px;
		text-align: center;
		line-height: 30px;
		color:#2D7EDF;
	}
	.header{
		font-size:15px;
		color:#2D7EDF;
		padding-bottom:10px;
		border-bottom:1px solid #eee;
	}
	.state{
		background: #fff;
		padding:10px;
		ul{
			margin:10px 0;
			li{
				margin-left:50px;
				line-height: 40px;
				font-size:15px;
				p{
					display: inline-block;
			 	margin-right:50px;
				}
				span{
					display: inline-block;
					margin-left:20px;
					color:#2D7EDF;
					font-weight: bold;
				}
			}
		}
	}
	/deep/.el-button{
		padding:8px 10px;
	}
	/deep/.el-table thead{
		color:#2D7EDF;
		.cell{
			text-align: left;
		}
	}
	.address{
		background: #fff;
		padding:10px;
		margin:15px 0;
		ul{
			margin:10px 0;
			li{
				margin-left:50px;
				line-height: 40px;
				font-size:15px;
				p{
					display: inline-block;
			 	margin-right:50px;
				}
			}
		}
	}
	.orderBox,.fix{
		background: #fff;
		padding:10px;
	}
	.fix{
		margin-bottom:10px;
	}
	.total{
		 margin:15px 0;
			background: #fff;
			padding:20px 10px;
			text-align: right;
			p{
				display: inline-block;
				font-size:15px;
				color:#2D7EDF;
				margin-left:30px;
				font-weight: bold;
			}
	}
	.manipulate{
		 margin:15px 0;
			background: #fff;
			padding:20px 10px;
			text-align: right;
	}
</style>
